<!-- 登录页面 -->
<template>
  <div class="login-container">
    <div class="login-bg"></div>
    <div class="login-box">
      <div class="logo">
        <img src="../../assets/imgs/logo.png" />
      </div>
      <div class="body">
        <h4 class="title">零食小铺</h4>
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" class="login-form">
          <el-form-item prop="account">
            <el-input
              type="text"
              v-model="loginForm.account"
              autocomplete="off"
              placeholder="用户名 / 手机号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input type="password" v-model="loginForm.pwd" autocomplete="off" placeholder="账号密码"></el-input>
          </el-form-item>
          <el-form-item class="btn-group">
            <el-button @click="checkLogin()" type="primary" style="width: 100%;" :loading="isLogin">{{isLogin?'正在登录...':'登录'}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import {mapActions} from 'vuex'
export default {
  inject:['reload'],
  data () {
    // 定义一个验证账号的规则
    var validateAccount = (rule, value, callback) => {
      if (!value) {
        callback(new Error('用户名不能为空!'))
      } else if (value.length < 4 || value.length > 16) {
        callback(new Error('用户名长度必须是在4-16字符之间'))
      } else {
        // 它的意思是 当符合要求的条件的时候，就触发回调函数。这个回调的函数是显示成功的标识
        setTimeout(() => {
          callback()
        }, 500)
      }
    }

    var validatePwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (value.length < 6 || value.length > 18) {
        callback(new Error('密码长度必须是6-18个字符'))
      } else {
        callback()
      }
    }
    return {
      isLogin: false, // 是否登录标识
      loginForm: {
        account: '',
        pwd: ''
      },
      rules: {
        account: [{ validator: validateAccount, trigger: 'blur' }],
        pwd: [{ validator: validatePwd, trigger: 'blur' }]
      }
    }
  },
  methods: {
    ...mapActions('user', [
      'saveUserInfo'
    ]),
    checkLogin () {
      // console.log(1122)
      // 先触发表单验证，如果验证通过，才发起登录请求
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.isLogin = true
          // 向服务器发送登录请求
          this.$http.login(this.loginForm).then(res => {
            if (res && res.data.code == 200) {
              // 调用element中的一个提示组件
              this.$message({
                type: 'success',
                message: '登录成功！'
              })
              // 将登录成功后返回的用户信息数据存储到vuex和本地存储（异步操作）
              // 当用户的信息存储完后应该跳转到登录前或后台的主页面
              this.saveUserInfo(res.data.data).then(() => {
              // 跳转到登录主页
              // 获取拦截之前的页面路由地址，如果没有则返回首页
                let redirectTo = this.$route.query.redirect || '/'
                console.log(redirectTo)
                this.$router.push({
                  path: redirectTo
                })
              })         
            }
            this.isLogin = false
          })
        }
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    // console.log('即将进入登录组件', store)
    // 判断是否已经登录，如果已经登录状态，应该跳转到后台首页
    if (store.state.user.info.access_token !== '') {
      next({
        path: '/'
      })
    } else {
      next()
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  height: 100vh;
  position: relative;
  .login-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../../assets/imgs/bg.jpg) no-repeat 0 0 ~"/" cover fixed;
    filter: blur(2px);
  }
  .login-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 12px #ccc;
    .logo {
      height: 100px;
      padding-top: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 60px;
        height: 60px;
        margin-bottom: -20px;
      }
    }
    .body {
      padding: 10px 30px 30px;
      .title {
        font-weight: 400;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-bottom: 25px;
        color: #666;
        letter-spacing: 1px;
      }
    }
  }
}
</style>
